<template>
  <div class="order-container boxjiushi">
    <van-tabs v-model="active" :swipeable="true" :sticky="true" @change="change">
      <van-tab title="待付款"></van-tab>
      <van-tab title="待收货"></van-tab>
      <van-tab title="待评价"></van-tab>
      <van-tab title="已完成"></van-tab>
      <van-tab title="退款中"></van-tab>
      <van-tab title="待到店"></van-tab>
    </van-tabs>
    <div class="noorder" v-if="noorder == 1">
      <img src="@/assets/img/none.png" class="noimg">
    </div>
    <!-- <van-swipe-cell :right-width="65" :left-width="65" :on-close="onClose">
  <span slot="left">选择</span>
    <span slot="right">删除</span>
    </van-swipe-cell>-->
    <!-- <van-cell-group>
    <van-cell title="单元格" value="内容" />
    </van-cell-group>-->
    <div style="padding-bottom:2rem;">
      <div v-for="(item,index)  in items" :key="index" class="list" @click="Suk_todetaillc(index)">
      <div class="showimgbox">
        <img :src="item.dinImage?item.dinImage:noimg">
      </div>
      <div class="showdescbox">
        <p class="showp">{{ item.dinName }}</p>

        <div v-for="(item,index) in items[index].orders" :key="index" style="display:flex">
          <p class="showp">{{ item.productName }}</p>
          <span class="showspan">x{{item.number}}</span>
        </div>
        <div style="display:flex">
          <p class="showp">餐盒费：{{ item.box }}元</p>
          <!-- <span class="showspan">x{{item.number}}</span> -->
        </div>
        <div style="display:flex" v-if="item.qishouphone">
          <p class="showp">骑手电话：{{ item.qishouphone }}</p>
          <!-- <span class="showspan">x{{item.number}}</span> -->
        </div>
        <span class="showspan">
          {{ item.productName }}等{{ item.orders.length }}件商品
          <em
            class="showem"
          >共计￥{{ item.totalMoney }}</em>
        </span>
      </div>

      <div class="showbtnbox">
        <div class="showbtn" v-if="active == 0" @click.stop="getstatus($event,index)">待付款</div>
        <div class="showbtn" v-if="active == 1" @click.stop="getstatus($event,index)">待收货</div>
        <div class="showbtn" v-if="active == 2" @click.stop="getstatus($event,index)">待评价</div>
        <div class="showbtn" v-if="active == 3" @click.stop="getstatus($event,index)">已完成</div>
        <div class="showbtn" v-if="item.dinStatus == 0 && active!=5">等待接单</div>
        <div class="showbtn" v-if="item.dinStatus == 1">已接单</div>
         <div class="showbtn" v-if="item.dinStatus == 2">配送完成</div>
         <div class="showbtn" v-if="item.dinStatus == 5">配送中</div>
        <div
          class="showbtn"
          v-if="active == 1"
          @click.stop="backmoney(index)"showbtn
          style="margin-top:0.1rem"
        >退单</div>
        <div
          class="showbtn"
          v-if="active == 0"
          @click.stop="backorder(index)"
          style="margin-top:0.1rem"
        >取消订单</div>
        <div
          class="showbtn"
          v-if="active == 5"
          @click.stop="look(index)"
          style="margin-top:0.1rem"
        >查看核销码</div>
      </div>
    </div>
    </div>

    <div class="btmbtn">
      <!-- <div class="paytit" v-if="discountmoney == 0"></div>
      <div class="paytit" v-if="discountmoney">已优惠￥{{ discountmoney }}</div>
      <div class="topay" @click="Suk_pay">去下单</div>-->
      <van-popup v-model="showpaybox" position="bottom">
        <div class="paybox jiushibox">
          <div @click="Suk_canlepay">取消</div>
          <div :index="0" @click="Suk_checkpay1" style="position:relative">
            <div class="payimgbox">
              <img src="@/assets/img/icon_ddxqzf_zfb.png" class="payicon">
            </div>
            <div class="paytextbox">
              <p class="paytext1">支付宝</p>
              <p class="paytext">推荐支付宝用户使用</p>
              <img src="@/assets/img/icon_ddxqzf_xz.png" v-if="checkpaytp == 0" class="gou">
            </div>
          </div>
          <div :index="1" @click="Suk_checkpay2" style="position:relative">
            <div class="payimgbox">
              <img src="@/assets/img/icon_ddxqzf_wxzf.png" class="payicon">
            </div>
            <div class="paytextbox">
              <p class="paytext1">微信支付</p>
              <p class="paytext">推荐微信用户使用</p>
              <img src="@/assets/img/icon_ddxqzf_xz.png" v-if="checkpaytp == 1" class="gou">
            </div>
          </div>
          <div></div>
        </div>
        <div class="tabmoney" @click="Suk_yespay">确认支付{{rate - discountmoney}}元</div>
      </van-popup>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      noimg: "@/assets/img/none.png",
      checkpaytp: 0,
      showpaybox: false,
      show: true,
      noorder: 0,
      active: 0,
      items: [],
      rate: 0,
      discountmoney: 0,
      orderid: ''
    };
  },
  created() {
    let that = this;
    that.change();
  },
  methods: {
    Suk_todetaillc(index) {
      let that = this;
//    that.orderid = that.items[index].orderInfoId
      if (that.active == 1) {
        that.$router.push({
          name: "orderdetailing",
          params: {
            orderid: that.items[index].orderInfoId
          }
        });
        localStorage.setItem("sorderid", that.items[index].orderInfoId);
        localStorage.setItem("sordertype", that.items[index].dinStatus);
      }
    },
    Suk_canlepay() {
      let that = this;
      that.showpaybox = 0;
    },
    look(index) {
      let that =this
      let str =that.items[index].orderInfoId
      that.$dialog
        .confirm({
          title: "请出示核销码给工作人员（订单后四位）",
          message:  str.substr(str.length-4)
        })
    },
    //这是我们的选择支付宝
    Suk_checkpay1() {
      let that = this;
      that.checkpaytp = 0;
    },
    //这是我们的选择微信支付
    Suk_checkpay2() {
      let that = this;
      that.checkpaytp = 1;
    },
    // 下面的是我们的支付方式
    Suk_yespay() {
      let that = this;
      let alltotal = that.rate - that.discountmoney;
      console.log(alltotal);
      if (that.checkpaytp == 0) {
        that.$toast.loading({
          message: "加载中..."
        });
        var Sukdata = {
//        orderInfoId: localStorage.getItem("sorderid"),
          orderInfoId: that.orderid,
          totalMoney: alltotal
        };
        that.axios
          .post(that.baseUrl + "/order/zhifuibao", that.Qs.stringify(Sukdata), {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
          .then(function(res) {
            if (res.request.status === 200) {
              if (res.data.meta.code == 200) {
                console.log(res.data);
                dsBridge.call("zfb_pay", res.data);
                that.change();
                that.$toast.clear();
              } else if (res.data.meta.code == 501) {
              }
            }
          });
      } else if (that.checkpaytp == 1) {
        that.$toast.loading({
          message: "加载中..."
        });
        var Sukdata = {
//        orderInfoId: localStorage.getItem("payid"),
					orderInfoId: that.orderid,
          totalMoney: alltotal
        };
        that.axios
          .post(that.baseUrl + "/order/fuKuan", that.Qs.stringify(Sukdata), {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          })
          .then(function(res) {
            if (res.request.status === 200) {
              if (res.data.meta.code == 200) {
                console.log(res.data);
                dsBridge.call("wx_pay", res.data);
                that.change();
                that.$toast.clear();
              } else if (res.data.meta.code == 501) {
              }
            }
          });
      }
    },
    change(e) {
      let that = this;
      that.$toast.loading({
        // mask: true,
        message: "加载中...",
        duration: 10000,
        forbidClick: true
      });
      var Sukdata = {
        userId: localStorage.getItem("userid"),
        shopStatus: that.active
      };
      console.log(Sukdata);
      that.axios
        .post(that.baseUrl + "/order/shopList", that.Qs.stringify(Sukdata), {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded"
          }
        })
        .then(function(res) {
          if (res.data.meta.code == 501) {
            that.items = "";
            that.noorder = 1;
            that.$toast.clear();
          }
          if (res.request.status === 200) {
            if (res.data.meta.code == 200) {
              console.log(res.data);
              that.noorder = 0;
              that.items = res.data.data;
              that.$toast.clear();
              // if(!res.data.data){
              //   that.$toast.clear
              // }
            } else if (res.data.meta.code == 501) {
            }
          }
        });
    },

    backorder(index) {
      let that = this;
      that.$dialog
        .confirm({
          title: "取消订单",
          message: "您确定要取消订单么？"
        })
        .then(() => {
          that.$toast.loading({
            message: "加载中..."
          });
          var Sukdata = {
            id: that.items[index].orderInfoId,
            userId:localStorage.getItem("userid")
          };
          console.log(Sukdata);
          that.axios
            .post(
              that.baseUrl + "/order/backorder",
              that.Qs.stringify(Sukdata),
              {
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded"
                }
              }
            )
            .then(function(res) {
              if (res.request.status === 200) {
                if (res.data.meta.code == 200) {
                  if (res.data.data == "商家或骑手已经接单,不能取消") {
                    that.$toast({
                      message: "商家或骑手已经接单,不能取消"
                    });
                  } else {
                    that.$toast({
                      message: "已取消订单"
                    });
                  }
                  console.log(res.data);
                } else if (res.data.meta.code == 501) {
                }
              }
            });
        })
        .catch(() => {
          // on cancel
        });
    },
    backmoney(index) {
      let that = this;
      that.$dialog
        .confirm({
          title: "申请退款",
          message: "您确定要申请退款么？"
        })
        .then(() => {
          that.$toast.loading({
            message: "加载中..."
          });
          var Sukdata = {
            orderInfoId: that.items[index].orderInfoId,
            totalMoney: that.items[index].totalMoney,
            userId: localStorage.getItem("userid")
          };
          console.log(Sukdata);
          that.axios
            .post(
              that.baseUrl + "/user/zhifubaoTuikuan",
              that.Qs.stringify(Sukdata),
              {
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded"
                }
              }
            )
            .then(function(res) {
              if (res.request.status === 200) {
                if (res.data.meta.code == 200) {
                  if (res.data.data == "商家或骑手已经接单,不能退款") {
                    that.$toast({
                      message: "商家或骑手已经接单,不能退款"
                    });
                  } else {
                    that.$toast({
                      message: "已申请退款"
                    });
                  }
                  console.log(res.data);
                } else if (res.data.meta.code == 501) {
                }
              }
            });
        })
        .catch(() => {
          // on cancel
        });
    },
    getstatus(e, index) {
      let that = this;
      console.log(that.items[index]);
      if (that.active == 2) {
        that.$router.push({
          name: "comment",
          params: {
            orderid: that.items[index].orderInfoId,
            shopid: that.items[index].dinId
          }
        });
      } else if (that.active == 3) {
      } else if (that.active == 0) {
        that.showpaybox = true;
        that.rate = that.items[index].totalMoney;
        that.discountmoney = that.items[index].couponMoney;
//         console.log(that.items[index].orderInfoId);
        that.orderid = that.items[index].orderInfoId;
        // localStorage.setItem("payid", that.items[index].orderInfoId);
        // localStorage.setItem("storeid", that.items[index].dinId);
        // that.$router.push({
        //   name: "payorder"
        // });
      } else if (that.active == 1) {
        that.$dialog
          .confirm({
            title: "确认收货",
            message: "您确认已经收货？"
          })
          .then(() => {
            // on confirm
            that.$toast.loading({
              message: "加载中..."
            });
            var Sukdata = {
              userId: localStorage.getItem("userid"),
              orderInfoId: that.items[index].orderInfoId
            };
            console.log(Sukdata);
            that.axios
              .post(
                that.baseUrl + "/order/delivery",
                that.Qs.stringify(Sukdata),
                {
                  headers: {
                    "Content-Type": "application/x-www-form-urlencoded"
                  }
                }
              )
              .then(function(res) {
                if (res.request.status === 200) {
                  if (res.data.meta.code == 200) {
                    console.log(res.data);
//                  that.$toast.success({
//                    message: res.data.data
//                  });
 										that.$dialog
											.confirm({
							            title: "温馨提示",
							            message: res.data.data
							          })
                    that.change();
                    that.$toast.clear();
                  } else if (res.data.meta.code == 501) {
                  }
                }
              });
          })
          .catch(() => {
            // on cancel
          });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.order-container {
  width: 100%;
  height: 100%;
  font-size: 0.3rem;
  background: #f4f4f4;
}
.noimg {
  width: 100%;
}
.boxjiushi {
  width: 100%;
  margin: 0 auto;
}

.noorder {
  width: 100%;
  text-align: center;
  margin-top: 45%;
  font-size: 25px;
}

.list {
  margin-bottom: 3rem;
  position: relative;
  border: 1px solid #eee;
  width: 89%;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 5px;
  margin-top: 15px;
  display: flex;
  align-items: center;
  background: #ffffff;
  .showdescbox {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 70%;
    justify-content: space-around;
    padding: 0.2rem 0;
  }
  .showbtnbox {
    margin-right: 0.3rem;
    .showbtn {
      // position: absolute;
      top: 33%;
      right: 10%;
      display: inline-block;
      //  height: 20px;
      width: 56px;
      border: 1px solid #ff9913;
      color: #ff9913;
      border-radius: 3px;
      line-height: 20px;
      text-align: center;
    }
  }
}
.showp {
  margin-left: 15%;
  font-weight: 500;
  font-size: 13px;
}
.showspan {
  color: #a0a0a0;
  margin-left: 15%;
  display: inline-block;
}
.showem {
  color: #ff3333;
  display: inline-block;
  float: right;
}

.showimgbox {
  width: 60px;
  height: 55px;
  img {
    width: 100%;
    height: 100%;
    margin-left: 0.2rem;
  }
}

.btmbtn {
  // position: fixed;
  display: flex;
  line-height: 1.5rem;
  justify-content: space-between;
  bottom: 0;
  z-index: 999;
  align-items: center;
  background: #fff;
  // height: 1.7rem;
  width: 100%;
}

//下面的是我们的支付选择

.paytit {
  font-size: 0.4rem;
  color: #000;
  text-indent: 0.5rem;
}
.chooseadlist {
  padding-bottom: 0.5rem;
}
.jiushibox {
  width: 90%;
  margin: 0 auto;
}
.payicon {
  width: 0.9rem;
  height: 0.9rem;
}
.payimgbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.payimgbox {
  display: inline-block;
  vertical-align: center;
}
.paytextbox {
  display: inline-block;
  vertical-align: center;
  margin-left: 0.3rem;
}
.paytext {
  height: 0.5rem;
}
.paytext1 {
  height: 0.5rem;
  color: #000;
  font-size: 0.4rem;
}
.tabmoney {
  background: #f11730;
  text-align: center;
  font-size: 0.4rem;
  color: #fff;
}
.gou {
  position: absolute;
  width: 0.4rem;
  height: 0.28rem;
  top: 1rem;
  right: 1rem;
}
.discountselect {
  margin-top: 0.3rem;
  margin-bottom: 0.2rem;
  display: flex;
  justify-content: space-between;
  font-size: 0.4rem;
  color: #000;
}
.showdiscountbox {
  padding: 0;
}
.discontbox {
  background: #f8f8f8;
  padding-bottom: 1.8rem;
  font-size: 0.3rem;
}
.disbox {
  background: #fff;
  border: 1px solid #e9e9e9;
  border-radius: 0.1rem;
  // box-shadow:0rem 0.001rem 0.1rem 0rem #919191;
  width: 90%;
  margin: 0 auto;
  margin-bottom: 0.4rem;
  margin-top: 0.1rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding-top: 0.3rem;
  padding-bottom: 0.4rem;
  .disleft {
    margin-left: 0.5rem;
  }
  .disright {
    margin-right: 0.5rem;
  }
  .dismoney {
    color: #f44;
    font-size: 0.6rem;
  }
  .distit {
    font-size: 0.5rem;
  }
}
.dishr {
  width: 100%;
  text-align: center;
  font-weight: 500;
  font-size: 0.5rem;
  padding: 0.3rem;
  border-bottom: 0.1rem solid #f44;
  border-bottom-left-radius: 0.1rem;
  border-bottom-right-radius: 0.1rem;
}
.closedisbox {
  text-align: center;
  background: #fff;
  font-size: 0.5rem;
  height: 1.5rem;
  line-height: 1.5rem;
  border-top: 1px solid #e9e9e9;
}
.checkdisimgbox {
  position: absolute;
  right: 1rem;
  width: 0.55rem;
  height: 0.55rem;
  .checkdisimg {
    width: 100%;
    height: 100%;
  }
}
.adsbox {
  max-height: 7.5rem;
  overflow: auto;
}
</style>
